<template>
 <button class="btn"  @click="importUser" title="批量导入"><el-icon><Sort/></el-icon></button>
 <el-dialog v-model="dialogVisible" title="导入文本" width="90%" >
      <el-upload
        ref="uploadRef"
        class="upload-demo"
        action="/api/user/upload"
        :auto-upload="false"
      >
        <template #trigger>
          <el-button type="primary">批量导入</el-button>
        </template>

         <template #tip>
          <div class="el-upload__tip">
            jpg/png files with a size less than 500kb
          </div>
        </template>
      </el-upload>
      <span>只能上传符合模板规范的文件数据，<a href="/student.xlsx" target="_self">点我下载</a>模板</span>
       <template #footer>
         <span class="dialog-footer">
           <el-button type="primary" @click="submit">
             确认
           </el-button>
           <el-button type="primary" @click="dialogVisible = false">
             取消 
           </el-button>      
         </span>
       </template>
     </el-dialog>
</template>
<script>
import { Sort } from '@element-plus/icons-vue';
 export default {
    name: 'SORT_USER_TABLE',
       props:["userList"],
       components:{
        Sort
        },
 data: function(){
 return {
    dialogVisible:false,
           formData:{
               userUuids:""
           },
 }
 },
 methods:{
    importUser(){
        this.$emit("getSelectData");
               this.dialogVisible = true;
               var that = this;
               this.formData.userUuids="";
    },
    submit(){
         this.$refs.uploadRef.submit();
         console.log(this.formData);
            }, 
        },
        mounted(){
            var that = this;
            this.$bus.on("importUserStuById",function(row){
                that.dialogVisible = true;
                that.formData.phone ="";
            })
       },
        unmounted(){
            this.$bus.off("importUserStuById")
       }
 }
</script>
<style>
html,
 body, 
 #app{
 height: 100%;
 }
</style>
<style scoped>
 .container {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 width: 100%;
 height: 100%;
 }
 .tr{
 width: 200px;
 flex-basis: 50px;
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 background-color: beige;
 align-items: center;
 }
 .second{
 background-color: aqua;
 }
</style>